// 聚焦近期热点
import React, { useState } from 'react'
import Title from '../title'
import Nav from '../nav/Nav'
import ImageFallback from '../Fimage/Lieimg'
import '../focusing/focusing.css'


function Newthree() {
  // 模拟数据，包含内容和对应的小图标
  const items = [
    {
      text: '精选推荐',
      images: 'https://js.ibaotu.com/act/24/08/30/66d1b43dbc76c.jpg',
      imag: 'https://js.ibaotu.com/act/24/08/30/66d1b4391de8c.jpg',
      defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/30/66d1b4427d672.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/14/66e546c752ccf.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/12/66b995ce53cda.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/07/66628e0ccb06f.jpg', href: '' }
      ]
    },
    {
      text: '元素背景',
      images: 'https://js.ibaotu.com/act/24/09/14/66e546bc211ca.jpg',
      imag: 'https://js.ibaotu.com/act/24/09/14/66e546c03a081.jpg',
      defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/09/14/66e5598d42b49.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/14/66e546b51fdff.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/04/19/662214f819bef.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/14/66e55b5ec5db7.jpg', href: '' },
      ]

    },
    {
      text: '3D模板',
      images: 'https://js.ibaotu.com/act/24/09/10/66e00ef92e7a3.jpg',
      imag: 'https://js.ibaotu.com/act/24/08/30/66d1b4b021650.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/08/30/66d1b42aceaba.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/14/66e54a0bc3c0f.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/08/30/66d1b4a29b2db.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/14/66e548c90fdc9.jpg', href: '' }]
    },
  ];

  const [selectedIndex, setSelectedIndex] = useState<number>(0);
//   const handleSelect = (newIndex) => {  
//     setSelectedIndex(newIndex);  
//     console.log(selectedIndex )
// };
  return (
    <div className='focusing_box'>
      {/* nav */}
      <div className='focusing_top'>
        <div className='foc_title'>
          <Title title='新晋潮流-3D'  />
        </div>

        <div className='foc_nav'>
          <Nav items={items}
           onSelect={setSelectedIndex} 
           selectedIndex={selectedIndex}
            />
        </div>
      </div>

      {/* tu */}
      <div className='focusing_tu'>
      <div className='da_tu'>
        <div style={{width:'100%',height:'100%',display:'flex',justifyContent:'space-between'}}>
            <div style={{width:'49%',height:'100%',overflow:'hidden'}}>
             <img src={items[selectedIndex].images}  onError={(e) => { e.target.src = items[selectedIndex].defaultImg}}  alt='加载失败'/>
        </div>
        <div style={{width:'49%',height:'100%',overflow:'hidden'}}>
             <img src={items[selectedIndex].imag}  onError={(e) => { e.target.src = items[selectedIndex].defaultImg}}  alt='加载失败'/>
        </div>
        </div>
        
        </div>

        <div className='xiao_tu'>
          {
            items[selectedIndex].list.map((item, index) => {
              return (
                <div key={index}>
                  <ImageFallback src={item.images}  fallbackSrc={items[selectedIndex].defaultImg} alt='加载失败'/>
                </div>
              )
            })
          }

        </div>
       
      </div>

    </div>
  )
}

export default Newthree

